<template>
	<view class="user-center">
		<view class="user-info">
			<image class="avatar" :src="userInfo.avatarUrl || '/static/logo.png'"></image>
			<view class="nickname">{{ userInfo.nickname || '未设置昵称' }}</view>
		</view>
		<view class="edit-section">
			<button class="edit-btn" @click="editNickname">修改昵称</button>
		</view>
		<button class="logout-btn" @click="logout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return
			}
			this.userInfo = userInfo
		},
		methods: {
			editNickname() {
				uni.showModal({
					title: '修改昵称',
					editable: true,
					placeholderText: '请输入新昵称',
					success: (res) => {
						if (res.confirm && res.content) {
							this.userInfo.nickname = res.content
							uni.setStorageSync('userInfo', this.userInfo)
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							})
							this.$forceUpdate()
						}
					}
				})
			},
			logout() {
				// 退出登录时清空健康数据缓存
				uni.request({
					url: 'http://127.0.0.1:3000/api/logout',
					method: "POST",
					data: {
						userId: this.userInfo.userId
					},
					success: (res) => {
						if (res.data.success) {
							this.clearUserData()
							uni.removeStorageSync('userInfo')
							uni.removeStorageSync('token')
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}
					}
				})

			},
			// 清空用户健康数据缓存
			clearUserData() {
				// 清除健康数据相关缓存
				uni.removeStorageSync('healthData')
				uni.removeStorageSync('lastAnalysis')
				uni.removeStorageSync('adviceFavorites')
				uni.removeStorageSync('customReminders')

				console.log('已清空用户健康数据缓存')

				// 如果当前在健康数据页面，强制刷新页面
				const pages = getCurrentPages()
				const currentPage = pages[pages.length - 1]
				if (currentPage && currentPage.route && currentPage.route.includes('health')) {
					// 强制刷新健康数据页面
					currentPage.loadHealthData()
					console.log('已刷新健康数据页面')
				}
			}
		}
	}
</script>

<style scoped>
	.user-center {
		min-height: 100vh;
		background: #f7f8fa;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: #e0f0e9;
		box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.08);
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 80rpx;
		color: #4CAF50;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		letter-spacing: 2rpx;
	}

	.edit-section {
		width: 80vw;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.edit-btn,
	.logout-btn {
		width: 80vw;
		max-width: 400rpx;
		height: 90rpx;
		margin: 18rpx 0;
		border: none;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.08);
		transition: background 0.2s;
	}

	.edit-btn {
		background: linear-gradient(135deg, #4CAF50, #45a049);
		color: white;
	}

	.logout-btn {
		background: linear-gradient(135deg, #ff4757, #ff7f50);
		color: white;
	}

	@media (max-width: 400px) {

		.edit-btn,
		.logout-btn {
			width: 90vw;
		}
	}
</style>